CSS Flexbox Container | 您所在的位置:网站首页 › flex-direction row › CSS Flexbox Container |
CSS Flex Container
❮ Previous
Next ❯
Parent Element (Container)
Like we specified in the previous chapter, this is a flex container (the blue area) with three flex items: 1 2 3The flex container becomes flexible by setting the display property to flex: Example .flex-container { display: flex;}Try it Yourself » The flex container properties are: flex-direction flex-wrap flex-flow justify-content align-items align-content The flex-direction PropertyThe flex-direction property defines in which direction the container wants to stack the flex items. 1 2 3 ExampleThe column value stacks the flex items vertically (from top to bottom): .flex-container { display: flex; flex-direction: column;}Try it Yourself » ExampleThe column-reverse value stacks the flex items vertically (but from bottom to top): .flex-container { display: flex; flex-direction: column-reverse;}Try it Yourself » ExampleThe row value stacks the flex items horizontally (from left to right): .flex-container { display: flex; flex-direction: row;}Try it Yourself » ExampleThe row-reverse value stacks the flex items horizontally (but from right to left): .flex-container { display: flex; flex-direction: row-reverse;}Try it Yourself » The flex-wrap PropertyThe flex-wrap property specifies whether the flex items should wrap or not. The examples below have 12 flex items, to better demonstrate the flex-wrap property. 1 2 3 4 5 6 7 8 9 10 11 12 ExampleThe wrap value specifies that the flex items will wrap if necessary: .flex-container { display: flex; flex-wrap: wrap;}Try it Yourself » ExampleThe nowrap value specifies that the flex items will not wrap (this is default): .flex-container { display: flex; flex-wrap: nowrap;}Try it Yourself » ExampleThe wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order: .flex-container { display: flex; flex-wrap: wrap-reverse;}Try it Yourself » The flex-flow PropertyThe flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties. Example .flex-container { display: flex; flex-flow: row wrap;}Try it Yourself » The justify-content PropertyThe justify-content property is used to align the flex items: 1 2 3 ExampleThe center value aligns the flex items at the center of the container: .flex-container { display: flex; justify-content: center;}Try it Yourself » ExampleThe flex-start value aligns the flex items at the beginning of the container (this is default): .flex-container { display: flex; justify-content: flex-start;}Try it Yourself » ExampleThe flex-end value aligns the flex items at the end of the container: .flex-container { display: flex; justify-content: flex-end;}Try it Yourself » ExampleThe space-around value displays the flex items with space before, between, and after the lines: .flex-container { display: flex; justify-content: space-around;}Try it Yourself » ExampleThe space-between value displays the flex items with space between the lines: .flex-container { display: flex; justify-content: space-between;}Try it Yourself » The align-items PropertyThe align-items property is used to align the flex items. 1 2 3In these examples we use a 200 pixels high container, to better demonstrate the align-items property. ExampleThe center value aligns the flex items in the middle of the container: .flex-container { display: flex; height: 200px; align-items: center;}Try it Yourself » ExampleThe flex-start value aligns the flex items at the top of the container: .flex-container { display: flex; height: 200px; align-items: flex-start;}Try it Yourself » ExampleThe flex-end value aligns the flex items at the bottom of the container: .flex-container { display: flex; height: 200px; align-items: flex-end;}Try it Yourself » ExampleThe stretch value stretches the flex items to fill the container (this is default): .flex-container { display: flex; height: 200px; align-items: stretch;}Try it Yourself » ExampleThe baseline value aligns the flex items such as their baselines aligns: .flex-container { display: flex; height: 200px; align-items: baseline;}Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline: 1 2 3 4Try it Yourself » The align-content PropertyThe align-content property is used to align the flex lines. 1 2 3 4 5 6 7 8 9 10 11 12In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property. ExampleThe space-between value displays the flex lines with equal space between them: .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-between; }Try it Yourself » ExampleThe space-around value displays the flex lines with space before, between, and after them: .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-around; }Try it Yourself » ExampleThe stretch value stretches the flex lines to take up the remaining space (this is default): .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; }Try it Yourself » ExampleThe center value displays the flex lines in the middle of the container: .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: center; }Try it Yourself » ExampleThe flex-start value displays the flex lines at the start of the container: .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; }Try it Yourself » ExampleThe flex-end value displays the flex lines at the end of the container: .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-end; }Try it Yourself » Perfect CenteringIn the following example we will solve a very common style problem: perfect centering. SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered: Example .flex-container { display: flex; height: 300px; justify-content: center; align-items: center;}Try it Yourself » The CSS Flexbox Container PropertiesThe following table lists all the CSS Flexbox Container properties: Property Description align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis display Specifies the type of box used for an HTML element flex-direction Specifies the direction of the flexible items inside a flex container flex-flow A shorthand property for flex-direction and flex-wrap flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis ❮ Previous Next ❯ ★ +1 W3schools Pathfinder Track your progress - it's free! Log in Sign Up |
CopyRight 2018-2019 实验室设备网 版权所有 |